import type {
  TProcessMonitoringData,
  TChargingPileOption,
  IChargingPileData,
  TchargingStatisticsData,
} from '../types/option'

export function getLineOption(echartDatas: TProcessMonitoringData) {
  const option = {
    grid: {
      left: '5%',
      right: '1%',
      top: '20%',
      bottom: '15%',
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
    },
    legend: {
      right: 'center',
      bottom: '5%',
      itemGap: 20,
      itemWidth: 13,
      itemHeigth: 12,
      textStyle: {
        color: '#64BCFF',
      },
      icon: 'rect',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#20FF89',
        },
      },
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#64BCFF',
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#64BCFF',
        },
      },
    ],
    series: [
      {
        name: echartDatas[0].name,
        type: 'line',
        smooth: true,
        stack: '总量',
        symbolSize: 5,
        showSymbol: false,
        itemStyle: {
          color: '#20FF89',
          lineStyle: {
            color: '#20FF89',
            width: 2,
          },
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#20FF89',
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)',
              },
            ],
          },
        },
        data: echartDatas[0].data,
      },
      {
        name: echartDatas[1].name,
        type: 'line',
        smooth: true,
        stack: '总量',
        symbolSize: 5,
        showSymbol: false,
        itemStyle: {
          color: '#EA9502',
          lineStyle: {
            color: '#EA9502',
            width: 2,
          },
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#EA9502',
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)',
              },
            ],
          },
        },
        data: echartDatas[1].data,
      },
    ],
  }
  return option
}

export function getPieEchartsDefaultOption(pieDatas: TChargingPileOption = []) {
  const colors = pieDatas.map((item) => {
    return item.color
  })

  const data = pieDatas.map((item) => {
    return {
      value: item.value,
      name: item.name,
    }
  })

  const total = pieDatas.reduce((a, b) => {
    return a + b.value * 1
  }, 0)

  const option = {
    color: colors,
    title: {
      text: `{nameSty| 充电桩总数}\n{number|${total}}`,
      top: '50%',
      left: '30%',
      textStyle: {
        rich: {
          nameSty: {
            fontSize: 19,
            color: 'white',
            padding: [10, 0],
          },
          number: {
            fontSize: 24,
            color: 'white',
            padding: [4, 0, 0, 20],
          },
        },
      },
    },
    legend: {
      orient: 'vertical',
      right: '10%',
      top: '18%',
      itemGap: 20,
      itemWidth: 16,
      itemHeigth: 16,
      icon: 'rect',
      formatter: function (name: string) {
        const currentItem: IChargingPileData | undefined = pieDatas.find(
          (item) => item.name === name,
        )
        if (!currentItem) return ''
        return (
          '{nameSty|' +
          currentItem.name +
          '}\n' +
          '{numberSty|' +
          currentItem.value +
          '个 }' +
          '{preSty|' +
          currentItem.percentage +
          '}'
        )
      },
      textStyle: {
        rich: {
          nameSty: {
            fontSize: 12,
            color: '#FFFFFF',
            padding: [10, 14],
          },
          numberSty: {
            fontSize: 12,
            color: '#40E6ff',
            padding: [0, 0, 0, 14],
          },
          preSty: {
            fontSize: 12,
            color: '#40E6ff',
          },
        },
      },
    },
    series: [
      {
        type: 'pie',
        center: ['40%', '57%'],
        radius: ['30%', '75%'],
        label: {
          show: false,
        },
        data: data,
        roseType: 'area',
      },
    ],
  }

  return option
}

export function getPieEchartsOption(pieDatas: TChargingPileOption = []) {
  const colors = pieDatas.map((item) => {
    return item.color
  })

  const data = pieDatas.map((item) => {
    return {
      value: item.value,
      name: item.name,
    }
  })

  const total = pieDatas.reduce((a, b) => {
    return a + b.value * 1
  }, 0)

  const option = {
    color: colors,
    title: {
      text: `{nameSty| 充电桩总数}\n{number|${total}}`,
      top: '50%',
      left: '30%',
      textStyle: {
        rich: {
          nameSty: {
            fontSize: 19,
            color: 'white',
            padding: [10, 0],
          },
          number: {
            fontSize: 24,
            color: 'white',
            padding: [4, 0, 0, 20],
          },
        },
      },
    },
    legend: {
      orient: 'vertical',
      right: '10%',
      top: '18%',
      itemGap: 20,
      itemWidth: 16,
      itemHeigth: 16,
      icon: 'rect',
      formatter: function (name: string) {
        const currentItem: IChargingPileData | undefined = pieDatas.find(
          (item) => item.name === name,
        )
        if (!currentItem) return ''
        return (
          '{nameSty|' +
          currentItem.name +
          '}\n' +
          '{numberSty|' +
          currentItem.value +
          '个 }' +
          '{preSty|' +
          currentItem.percentage +
          '}'
        )
      },
      textStyle: {
        rich: {
          nameSty: {
            fontSize: 12,
            color: '#FFFFFF',
            padding: [10, 14],
          },
          numberSty: {
            fontSize: 12,
            color: '#40E6ff',
            padding: [0, 0, 0, 14],
          },
          preSty: {
            fontSize: 12,
            color: '#40E6ff',
          },
        },
      },
    },
    series: [
      {
        type: 'pie',
        center: ['40%', '57%'],
        radius: ['30%', '75%'],
        label: {
          show: false,
        },
        data: data,
        roseType: 'area',
      },
    ],
  }

  return option
}

export function getBarEchartsOption(echartDatas: TchargingStatisticsData = []) {
  const category = echartDatas.map((item) => {
    return item.name
  })
  const categoryData = echartDatas.map((item) => {
    return item.value
  })

  const option = {
    grid: {
      left: '5%',
      right: '5%',
      top: '30%',
      bottom: '5%',
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
    },
    tooltip: {},
    xAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#42A4FF',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: 'white',
      },

      data: category,
    },
    yAxis: {
      name: '个',
      nameTextStyle: {
        color: 'white',
        fontSize: 13,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#42A4FF',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#42A4FF',
        },
      },
      axisLabel: {
        color: 'white',
      },
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        barWidth: 17,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#01B1FF', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#033BFF', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: categoryData,
      },
    ],
  }

  return option
}
